<template>
  <div id="cars">
      <div class="bgImg" v-bind:style="{backgroundImage:'url(' + activeItem.imgUrl + ')'}">
          <div class="btns">
              <div @click="moveClick" class="btn_move"></div>
          </div>
      </div>
      <div class="modal" v-if="isShow">
        <div class="modal-body">
            <input v-model="tel" type="tel" placeholder="输入手机号预约，即刻享受优惠" />
            <div @click="okBtnClick" class="okBtn">立即预约</div>
        </div>
       </div>
      <!-- <share></share> -->
  </div>
</template>

<script>
// import Share from '@/components/common/share.vue'
export default {
  name: 'cars',
  data () {
    return {
        isShow: false,
        tel: '',
    	pages: [
            {
                index: 0,
                imgUrl: require('../../assets/images/car1.jpg'),
            },
            {
                index: 1,
                imgUrl: require('../../assets/images/car2.jpg'),
            },
            {
                index: 2,
                imgUrl: require('../../assets/images/car3.jpg'),
            },
            {
                index: 3,
                imgUrl: require('../../assets/images/car4.jpg'),
            },
            {
                index: 4,
                imgUrl: require('../../assets/images/car5.jpg'),
            },
            {
                index: 5,
                imgUrl: require('../../assets/images/car6.jpg'),
            },
            {
                index: 6,
                imgUrl: require('../../assets/images/car7.jpg'),
            },
            {
                index: 7,
                imgUrl: require('../../assets/images/car8.jpg'),
            },
            {
                index: 8,
                imgUrl: require('../../assets/images/car9.jpg'),
            },
            {
                index: 9,
                imgUrl: require('../../assets/images/car10.jpg'),
            },
            {
                index: 10,
                imgUrl: require('../../assets/images/car11.jpg'),
            },
            {
                index: 11,
                imgUrl: require('../../assets/images/car12.jpg'),
            },
            {
                index: 12,
                imgUrl: require('../../assets/images/car13.jpg'),
            }
        ],
        activeIndex: 0,
        activeItem: {},
        textName: '小微',
        isMan: 1,
    }
  },
  // components: {
  //   Share
  // },
  mounted() {},
  activated(){
    this.wx_config();
      this.textName = localStorage.getItem('textName') || '';
      this.isMan = localStorage.getItem('isMan') || 1;
      this.activeIndex = this.$utils.randomNum(0,12);
      this.activeItem = this.pages[this.activeIndex];
      this.$utils.shareImage = this.activeItem.imgUrl;
  },
  methods: {
     // 微信配置
    wx_config: function(){
      var self = this;
      var pageUrl = self.$utils.getBaseUrl();
      self.$axios.get('wx_config',{
        params: {
          pageUrl: pageUrl
        }
      }).then(function (res){
      	 var data = res.data;
        wx.config({
          debug: false,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.nonceStr,
          signature: data.signature,
          jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
        });
        wx.ready(function(){
          console.log('ready')
          // 微信好友分享
          wx.onMenuShareAppMessage(self.$utils.shareData);
          // 朋友圈分享
          wx.onMenuShareTimeline(self.$utils.shareData);
          wx.error(function(res){
    		    console.log('失败');
          });
        });
      }).catch(function (error) {

      });
  	},
     // 即可开走按钮点击事件
     moveClick: function(){
         this.isShow = true;
     },
     // 确定按钮点击时间
     okBtnClick: function(){
        var self = this;
        if (!self.$utils.checkTel(self.tel)) {
            alert('请输入正确的手机号');
            return;
        }
        if (!self.$utils.wxInfo.openid) {
          self.$utils.wxInfo.openid = ''
        }
        self.$axios.get('add_user',{
            params: {
                tel: self.tel || '',
                openid: self.$utils.wxInfo.openid || '',
                sex: self.isMan || 1,
                name: self.textName || '',
                activeIndex: self.activeIndex || 0
            }
        }).then(function (res){
            alert(res.data.msg);
            self.isShow = false;
        }).catch(function (error) {
            // alert('预约成功!');
            self.isShow = false;
        });
     }
  },
}
</script>
<style scoped lang="less">
.bishu{
    width: 100%;
    height: 100%;
}
.bgImg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    // background-image: url(../../assets/images/page01.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}
.btns {
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    bottom: 120px;
    text-align: center;
    div{
        background-repeat: no-repeat;
        background-size: 294px 81px;
        background-position: center center;
    }
    .btn_move {
        display: inline-table;
        width: 294px;
        height: 81px;
        background-image: url(../../assets/images/btn_move.png);
    }
}
.modal{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .modal-body{
    width: 500px;
    height: 300px;
    background-color: white;
    border-radius: 12px;
    margin: 380px auto 0;
    text-align: center;
    font-size: 40px;
    color: #333333;
    input {
        margin-top: 50px;
        padding: 0 10px;
        height: 88px;
        line-height: 88px;
        border: solid 1px #999999;
        outline: none;
        border-radius: 8px;
        width: 400px;
    }
    .okBtn{
      width: 180px;
      height: 80px;
      line-height: 80px;
      margin: 40px auto 0;
      background-color: #1AAD19;
      border-radius: 12px;
      color: white;
      font-size: 30px;
    }
  }
}
</style>
